<template>

  <div>
    <div class="el-container">
      <div class="left-block">
        <div class="block1">
          <h1 style="margin-top: 10px">{{nameList[0]}}</h1>
          <span>冠军商品</span>
        </div>
        <div class="block2">
          <h1 style="margin-top: 10px">{{nameList[1]}}</h1>
          <span>亚军商品</span>
        </div>
        <div class="block3">
          <h1 style="margin-top: 10px">{{shopNameList[0]}}</h1>
          <span>冠军店铺</span>
        </div>
        <div class="block4">
          <h1 style="margin-top: 10px">{{shopNameList[1]}}</h1>
          <span>亚军店铺</span>
        </div>
      </div>
      <div class="right-chart">
        <div id="main" style="width: 430px;height: 350px;margin-left: 10px;float:left"></div>
        <div id="main2" style="width: 430px;height: 350px;float: right"></div>
      </div>
      <div style="width: 80%;height: 270px;position: absolute;bottom: 30px">
        <h3 style="margin-bottom: 10px">缩放地图查看地图上附近无人超市的位置</h3>
        <el-amap
          ref="map"
          vid="amapDemo"
          :center="center"
          expandZoomRange="true"
          :zoom="zoom"
          :plugin="plugins"
          :pitch="66"
        >
          <el-amap-marker v-for="(item,index) in jwdu" :key="index" :position="item.lnglat" :title="item.title" > </el-amap-marker>
        </el-amap>
      </div>
    </div>
  </div>

</template>
<script>
const echarts = require('echarts')
export default {
  data () {
    return {
      times: [], // 方便生成表
      top10List: [], /* 商品销量榜 */
      top10ShopList: [], /* 店铺销量榜 */
      dataListLoading: false,
      nameList: [], /* 商品名字列表 */
      sumList: [], /* 商品总数列表 */
      shopNameList: [], /* 商店名字列表 */
      shopSumList: [], /* 商店总数列表 */
      /* 高德地图 */
      center: [118.78333, 32.05000],
      jwdu: [{
        title: '上海无人超市',
        lnglat: [121.472644, 31.231706]
      },
      {
        title: '杭州无人超市',
        lnglat: [120.20000, 30.26667]
      },
      {
        title: '苏州无人超市',
        lnglat: [120.62, 31.32]
      },
      {
        title: '南通无人超市',
        lnglat: [120.86, 32.01]
      },
      {
        title: '南京无人超市',
        lnglat: [118.78333, 32.05000]

      }
      ],
      zoom: 15,
      plugins: [
        {
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 100, // 超过10秒后停止定位，默认：无穷大
          maximumAge: 0, // 定位结果缓存0毫秒，默认：0
          convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: true, // 显示定位按钮，默认：true
          buttonPosition: 'RB', // 定位按钮停靠位置，默认：'LB'，左下角
          showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
          showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: false, // 定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
          extensions: 'all',
          // 地图定位按钮
          pName: 'Geolocation',
          init (o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              console.log(result)
              if (result && result.position) {
                self.lng = result.position.lng
                self.lat = result.position.lat
                self.center = [self.lng, self.lat]
                self.loaded = true
                self.$nextTick()
              }
            })
          }
        },
        {
          // 地图工具条
          pName: 'ToolBar',
          init (o) {
          }
        },
        {
          // 左下角缩略图插件 比例尺
          pName: 'Scale',
          init (o) {
          }
        }
      ]
    }
  },
  mounted () {
    this.getData()
    const that = this
    setTimeout(function () { // 这里定时器是因为，绘图太快，数据跟不上，等2s后在绘图！！
      that.init()
      that.init2()
    }, 2000)
  },
  methods: {
    // 获取数据
    getData () {
      this.dataListLoading = this.$loading({ text: '加载数据...' })
      this.$http.get('/goods/top10').then(data => {
        this.dataListLoading.close()
        if (data.code === 0) {
          this.top10List = data.list
        }
        this.$http.get('/goods/top10/shop').then(data => {
          if (data.code === 0) {
            this.dataListLoading.close()
            this.top10ShopList = data.list
            this.formatData()
          }
        })
      })
    },
    // 创建表
    init () {
      var myChart = echarts.init(document.getElementById('main'))
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '商品销售数量前五榜'
        },
        tooltip: {},
        xAxis: {
          data: this.nameList,
          axisLabel: {
            color: '#000000',
            interval: 0, // 控制是否全部显示
            rotate: 40// 控制字体倾斜
          }
        },
        yAxis: {},
        legend: {
          data: ['销量']
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: this.sumList,
            label: {
              show: true,
              position: 'top',
              textStyle: {
                fontSize: 10
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    // 格式数据
    formatData () {
      this.nameList = this.top10List.map(item => item.name)
      this.sumList = this.top10List.map(item => item.sum)
      this.shopNameList = this.top10ShopList.map(item => item.address + '/' + item.shopName)
      this.shopSumList = this.top10ShopList.map(item => item.sum3)
    },
    init2 () {
      var myChart = echarts.init(document.getElementById('main2'))
      var option = {
        title: {
          text: '商店销售数量前五榜'
        },
        tooltip: {},
        xAxis: {
          data: this.shopNameList,
          axisLabel: {
            color: '#000000',
            interval: 0, // 控制是否全部显示
            rotate: 20// 控制字体倾斜
          }
        },
        yAxis: {},
        legend: {
          data: ['销量']
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: this.shopSumList,
            label: {
              show: true,
              position: 'top',
              textStyle: {
                fontSize: 10
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}

</script>
<style>
.left-block{
  width: 350px;
  height: 400px;
  position: relative;
}
.block1{
  text-align: center;
  width: 155px;
  height: 132px;
  position: absolute;
  background: #ccc;
  top: 5px;
  left: 25px;
  border-radius: 15px;
}
.block2{
  text-align: center;
  width: 155px;
  height: 132px;
  position: absolute;
  background: rgb(35,183,229);
  top: 5px;
  right: 20px;
  border-radius: 15px;
}
.block3{
  text-align: center;
  width: 155px;
  height: 132px;
  position: absolute;
  background: rgb(114,102,186);
  top: 150px;
  left: 25px;
  border-radius: 15px;
}
.block4{
  text-align: center;
  width: 155px;
  height: 132px;
  position: absolute;
  background: #ccc;
  top: 150px;
  right: 20px;
  border-radius: 15px;
}
</style>
